<template>
	<view class="main ">
		<view class="list_item container" v-for="(item, index) in listData" :key="item.recruitId">
			<!-- 顶部 -->
			<view class="top_group">
				<view class="company_group" @click="goOthershomepage(item.recruitId)">
					<view class="company_img_con">
						<image  class="img" :src="item.recruitUserVo.userHeaderImage" mode="aspectFill">
							
						</image></view>
					<view class="company_info_con">
						<view class="company_name" >{{ item.recruitUserVo.userNickname }}</view>
						<view class="company_subtitle">官方认证：{{ item.authenticationSponsorName }}</view>
					</view>
				</view>
				<view class="price_group">￥{{ item.recruitPrice }} / 人</view>
			</view>
			<!-- 主体 -->
			<view class="main_group" @click="goRecruit(item.recruitId)">
				<view class="content_group">
					<view class="recruit_class">[{{ item.recruitClass }}]</view>
					<view class="content">{{ item.recruitName }}</view>
				</view>
				<view class="img_con" >
					<view :class="imgClassObj(index)" v-for="el in item.recruitImage" :key="el.recruitImageId"><image class="img" :src="el.recruitImage" mode="aspectFill"></image></view>
				</view>
			</view>
			<!-- 底部 -->
			<view class="apply_group">
				<view class="end_time">结束时间：{{ item.recruitEndTime }}</view>
				<view type="default" class="pply_btn" @click="goSign(item.recruitId)">我要报名</view>
			</view>
		</view>
		<slot></slot>
	</view>
</template>

<script>
export default {
	props: {
		listData: Array
	},
	data() {
		return {};
	},
	methods:{
		
		// 我要报名页面
		goSign(id) {
			uni.navigateTo({
				url: '../sign/sign?bid=' + id
			});
		},
		// 发布招募页面
		goRecruit(id) {
			uni.navigateTo({
				url: '../recruit/recruit?pid=' + id
			});
		},
		// 查看他人主页
		goOthershomepage(id) {
			uni.navigateTo({
				url: '/components/me/othershomepage?userId=' + id
			});
		},
	},
	computed:{
		imgClassObj(){
			
			// console.log(recruitImage)
			return (index)=>{
				const {recruitImage}=this.listData[index]
				return {
				"img_item":recruitImage,//&&recruitImage.length>1,
				"img_item2":recruitImage&&recruitImage.length>1,
				"img_item3":recruitImage&&recruitImage.length>3
			}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	// outline: 1px solid red;
}
.main{
	// background-color: #f0f3f8;
}
.img {
	width: 100%;
	height: 100%;
}
.list_item {
	width: 100%;
	padding-top: 30rpx;
	background-color: #FFFFFF;
	margin-bottom: 10rpx;
	.top_group {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// background-color: #000000;
		margin-bottom: 22rpx;
		.company_group {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			// outline: 1px solid red;
			.company_img_con {
				width: 70rpx;
				height: 70rpx;
				// background-color: #eaeaea;
				border: solid 1rpx #e9e9e9;
				overflow: hidden;
				border-radius: 50%;
				margin-right: 10rpx;
			}
			.company_info_con {
				font-family: PingFangSC-Regular;
				font-size: 28rpx;
				// font-weight: bold;
				line-height: 33rpx;
				color: #000000;
				.company_subtitle {
					font-family: PingFangSC-Light;
					font-size: 20rpx;
					font-weight: normal;
					line-height: 33rpx;
					color: #666666;
				}
			}
		}
		.price_group {
			font-family: PingFangSC-Semibold;
			font-size: 30rpx;
			font-weight: bold;
			line-height: 33rpx;
			color: #ff6262;
		}
	}
	.main_group {
		margin-bottom: 20rpx;
		.content_group {
			display: flex;
			margin-bottom: 12rpx;
			.recruit_class {
				font-family: PingFangSC-Semibold;
				font-size: 36rpx;
				font-weight: bold;
				line-height: 33rpx;
				color: #fead38;
				margin-right: 10rpx;
			}
			.content {
				font-family: PingFangSC-Ultralight;
				font-size: 32rpx;
				color: #333333;
			}
		}
		.img_con {
			width: 100%;

			display: flex;
			justify-content: space-between;
			.img_item {
				width: 100%;
				height: 467rpx;
				border-radius: 5rpx;
			}
			.img_item2 {
				width: 346rpx;
				height: 346rpx;
				background-color: #eaeaea;
				border-radius: 8rpx;
				overflow: hidden;
			}
			.img_item3 {
				width: 223rpx;
				height: 222rpx;
				border-radius: 10rpx;
			}
		}
	}
	.apply_group {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.end_time {
			font-family: PingFangSC-Regular;
			font-size: 22rpx;
			line-height: 33rpx;
			color: #666666;
		}
		.pply_btn {
			// width: 137rpx;
			margin: 20rpx 0 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 20rpx;
			height: 44rpx;
			background-color: #ff6262;
			border-radius: 22rpx;
			ont-family: PingFangSC-Regular;
			font-size: 26rpx;
			color: #ffffff;
		}
	}
}
</style>
